<template>
  <div id="app">
    <b-container id="nav" class="bv-example-row" fluid>
      <b-row class="container-fluid" align-v="start" align-h="start">
        <b-col align-self="start" md="2">
          <b-list-group>
            <b-list-group-item>
              <router-link class="no-underline text-black" to="/">首页</router-link>&nbsp;&nbsp;
              <router-link class="no-underline text-black" to="/about">关于</router-link>
            </b-list-group-item>
            <b-link class="no-underline" href="#" v-for="nav in navigators" :key="nav.key">
              <b-list-group-item class="text-start" @click="handleClick(nav.key)">
                <span v-if="nav.children.length>0"><span class="text-dark" v-if="!nav.drop">▶</span><span class="text-dark" v-if="nav.drop">▼</span></span>{{ nav.label }}
              </b-list-group-item>
              <div v-if="nav.drop">
                <b-link class="no-underline" href="#" v-for="nav2 in nav.children" :key="nav2.key">
                  <b-list-group-item class="text-start" @click="handleClick(nav2.key)" :class="'offset-'+nav2.offset">
                    <span v-if="nav2.children.length>0"><span class="text-dark" v-if="!nav2.drop">▶</span><span class="text-dark" v-if="nav2.drop">▼</span></span>{{ nav2.label }}
                  </b-list-group-item>
                  <div v-if="nav2.drop">
                    <b-link class="no-underline" href="#" v-for="nav3 in nav2.children" :key="nav3.key">
                      <b-list-group-item class="text-start" @click="handleClick(nav3.key)" :class="'offset-'+nav3.offset">
                        <span v-if="nav3.children.length>0"><span class="text-dark" v-if="!nav3.drop">▶</span><span class="text-dark" v-if="nav3.drop">▼</span></span>{{ nav3.label }}
                      </b-list-group-item>
                      <div v-if="nav3.drop">
                        <b-link class="no-underline" href="#" v-for="nav4 in nav3.children" :key="nav4.key">
                          <b-list-group-item class="text-start" @click="handleClick(nav4.key)" :class="'offset-'+nav4.offset">
                            <span v-if="nav4.children.length>0"><span class="text-dark" v-if="!nav4.drop">▶</span><span class="text-dark" v-if="nav4.drop">▼</span></span>{{ nav4.label }}
                          </b-list-group-item>
                          <div v-if="nav4.drop">
                            <b-link class="no-underline" href="#" v-for="nav5 in nav4.children" :key="nav5.key">
                              <b-list-group-item class="text-start" @click="handleClick(nav5.key)" :class="'offset-'+nav5.offset">
                                <span v-if="nav5.children.length>0"><span class="text-dark" v-if="!nav5.drop">▶</span><span class="text-dark" v-if="nav5.drop">▼</span></span>{{ nav5.label }}
                              </b-list-group-item>
                            </b-link>
                          </div>
                        </b-link>
                      </div>
                    </b-link>
                  </div>
                </b-link>
              </div>
            </b-link> 
          </b-list-group>
        </b-col>
        <b-col id="page" md="10" offset-md="0">
          <router-view/>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 10px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}

.no-underline {
  text-decoration:none;
}

.container-fluid {
  padding-right: 0px;
  padding-left: 0px;
}
</style>

<script>
import {navigators, NavigatorItemArray} from '@/utils/navigator-item.js'

export default {
  name: 'App',
  data() {
    return {
      navigators
    }
  },
  methods: {
    handleClick(key) {
      var nav = NavigatorItemArray[key]
      if (nav.children.length == 0) {
        console.log(`view-${key}.vue`)
        this.$router.replace(`/${key}`)
      }
      else {
        if (nav.drop) {
          nav.drop = false
        }
        else {
          nav.drop = true
        }
      }
    }
  }
}
</script>
